<template>
  <div class="login">
    <h5 class="logo"
        v-text="title" />

    <a-form layout="inline"
            class="form"
            :model="formState"
            @finish="handleFinish"
            @finishFailed="handleFinishFailed">
      <a-form-item class="form-item">
        <a-input v-model:value="formState.user"
                 placeholder="Username">
          <template #prefix>
            <UserOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item class="form-item">
        <a-input v-model:value="formState.password"
                 type="password"
                 placeholder="Password">
          <template #prefix>
            <LockOutlined style="color: rgba(0, 0, 0, 0.25)" />
          </template>
        </a-input>
      </a-form-item>
      <a-form-item class="form-item">
        <a-button type="primary"
                  html-type="submit"
                  block
                  :disabled="formState.user === '' || formState.password === ''">
          Log in
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>
<script>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive, toRefs } from 'vue';
import {useRouter} from 'vue-router'
import { userStore } from '/@/store/modules/user'
import { v4 as uuidv4 } from 'uuid';
export default defineComponent({
  setup() {
    const formState = reactive({
      user: '',
      password: '',
    });  

    const router = useRouter()

    const state = reactive({
      title: import.meta.env.VITE_APP_SYSTEM_NAME,
      userInfo: {
          name: 'hema',
          userId: uuidv4()
      },
      token: uuidv4()
    });

    const handleFinish = (values) => {
      console.log(values, formState);
      userStore.store.dispatch('setUserInfo', state.userInfo);
      userStore.store.dispatch('setToken', state.token);
      router.push({ name: 'dashboard' });
    };

    const handleFinishFailed = (errors) => {
      console.log(errors);
    };

    return {
      ...toRefs(state),
      formState,
      handleFinish,
      handleFinishFailed,
    };
  },

  components: {
    UserOutlined,
    LockOutlined,
  },
});
</script>

<style lang="less">
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding-top: 12%;
  overflow: hidden;
  background-color: #2d3a4b;
  .logo {
    font-size: 36px;
    color: #fff;
    text-align: center;
  }
  .form {
    display: flex;
    flex-direction: column;
    width: 20%;
    .form-item {
      width: 100%;
      margin: 3px 0;
      .ant-form-item-control-wrapper {
        width: 100%;
      }
    }
  }
}
</style>